<template>
  <div>
    <header><TopNav :title="$route.meta.title" /></header>
    <main class="main">
      <van-cell-group>
        <van-cell style="margin-bottom: 0.3rem">
          <section class="order_statue">
            <p><span>订单状态：</span>{{ orderItem.orderStatusString }}</p>
            <p><span>订单时间：</span>{{ orderItem.orderNo }}</p>
            <p><span>下单时间：</span>{{ orderItem.createTime }}</p>
            <div v-if="show2">
              <van-button
                type="primary"
                style="width: 100%; margin-bottom: 0.3rem; color: white"
                color="rgb(27, 174, 174)"
                @click="ok"
                >{{ goodsStatus }}</van-button
              >
              <van-button type="default" style="width: 100%; color: black"
                >取消订单</van-button
              >
            </div>
          </section>
        </van-cell>
        <van-cell>
          <section class="order_price">
            <p><span>商品金额：</span> ￥{{ orderItem.totalPrice }}</p>
            <p><span>配送方式：</span>普通快递</p>
          </section>
        </van-cell>
        <van-cell>
          <van-cell-group>
            <van-cell
              v-for="item in orderItem.newBeeMallOrderItemVOS"
              :key="item.goodsId"
            >
              <van-card
                :num="item.goodsCount"
                :price="item.sellingPrice"
                desc="全场包邮"
                :title="item.goodsName"
                :thumb="item.goodsCoverImg"
              />
            </van-cell>
          </van-cell-group>
        </van-cell>
      </van-cell-group>
      <PayTarBar 
      v-show="show" 
      :show="show"
      :orderNum="orderItem.orderNo"
       @getShow="getSon"></PayTarBar>
    </main>
  </div>
</template>

<script>
import { getItemOrder, changeOrderStatue } from "@/api/index";
import TopNav from "@/components/topNav.vue";
import PayTarBar from "@/components/payTarBar.vue";
export default {
  name: "itemOrder",
  created() {
    this.getOrder();
  },
  data() {
    return {
      orderItem: {},
      show2: false, //是否是未支付订单
      show: false, //是否显示支付按钮
      goodsStatus: "",
    };
  },
  methods: {
    ok() {
      if (this.orderItem.orderStatus === 0) {
        this.show = true;//显示支付按钮
      } else {
        this.$dialog
          .confirm({
            message: "您确认收货吗？",
          })
          .then(() => {
            changeOrderStatue(this.$route.query.id).then((data) => {
              if (data.resultCode === 200) {
                this.getOrder();
              }
            });
          });
      }
    },
    getOrder() {
      getItemOrder(this.$route.query.id).then((data) => {
        this.orderItem = data.data;
        if (this.orderItem.orderStatus === 4) {
          this.show2 = false;
          return;
        } else if (this.orderItem.orderStatus === 0) {
          this.goodsStatus = "去支付";
        } else if (this.orderItem.orderStatus === 1) {
          this.goodsStatus = "确认收货";
        }
        this.show2 = true;
      });
    },
    getSon(val) {
      console.log(123);
      this.show = val;
    },
  },
  components: { TopNav, PayTarBar },
};
</script>
<style scoped lang="less">
.main {
  margin-top: 1.5rem;
  .order_statue,
  .order_price {
    > span {
      color: #999;
    }
  }
}
</style>